<template>
  <div class="container-fuild">
    <div class="row">
      <div class="card">
        <div class="card-header">
          <p class="card-title" style="font-size: 20px;padding-left: 5px;font-weight: bold">实训班小组</p>
        </div>
        <div class="card-body custom-ekeditor">
          <div id="ckeditor">

            <el-input placeholder="请输入小组名字" v-model="keyword" style="width: 160px;float: left">
              <i slot="prefix" class="el-input__icon el-icon-search" style="line-height: 30px"></i>
            </el-input>
            <el-button size="small" @click="search1"
                       style="float: left;background-color: #7d94c0;color: white;margin-left: -1px">
              搜索
            </el-button>
            <!--            <el-button size="small"  @click="search3" style="float: left;background-color: #7d94c0;color: white">学生导入</el-button>-->
            <el-button size="small" @click="search2" style="float: left;background-color: #7d94c0;color: white">
              新增项目组
            </el-button>
            <el-button size="small" @click="search3" style="float: left;background-color: #7d94c0;color: white">
              学生个人分数导入模板
            </el-button>
            <el-button size="small" @click="search4"
                       style="float: left;background-color: #7d94c0;color: white;margin-bottom: 30px">
              小组分数导入
            </el-button>
            <template>
              <el-table
                  :data="tableData"
                  style="width: 100%;"
                  border
                  :default-sort="{prop: 'date', order: 'descending'}"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
              >
                <el-table-column
                    prop="groupName"
                    label="组名"
                    sortable
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="项目名"
                    sortable
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="groupLeader"
                    label="组长"
                    width="90">
                </el-table-column>
                <el-table-column label="小组成员" width="130">
                  <template slot-scope="scope">
                    <el-button size="mini" style="background-color: white ;color: #0261a0"
                               @click="handleEdit1(scope.$index, scope.row)"><i class="el-icon-search"></i>
                    </el-button>
                    <el-button size="mini" style="background-color: white ;color: #0261a0"
                               @click="handleEdit2(scope.$index, scope.row)"><i class="el-icon-plus"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" style="background-color: #0261a0 ;color: white"
                               @click="handleEdit3(scope.$index, scope.row)">指定组长
                    </el-button>
                    <el-button size="mini" style="background-color: #3ca3e4 ;color: white"
                               @click="handleEdit4(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button size="mini" style="background-color: #3ca3e4 ;color: white"
                               @click="handleEdit5(scope.$index, scope.row)">项目简介
                    </el-button>
                    <el-button size="mini" style="background-color: #3ca3e4 ;color: white"
                               @click="handleEdit6(scope.$index, scope.row)">查看文档
                    </el-button>
                    <el-button size="mini" style="background-color: #3abdea ;color: white"
                               @click="handleEdit7(scope.$index, scope.row)">小组分数
                    </el-button>
                    <el-button size="mini" style="background-color: #3abdea ;color: white"
                               @click="handleEdit8(scope.$index, scope.row)"><i class="el-icon-delete-solid"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <el-dialog title="添加单个项目组" :visible.sync="dialog2" style="font-weight: bold"
                       append-to-body width="35%" class="showAll_dialog">
              <el-form label-width="80px" v-model="ruleForm2">
                <el-form-item label="面向专业:" style="color: #7d94c0;padding-left: 20px">
                  <el-select v-model="ruleForm2.major" placeholder="请选择专业" style="color: #7d94c0">
                    <el-option style="color: #7d94c0" v-for="item in ss4" :key="item.major" :value="item.major" :label="item.major"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目名称:" label-width="30%" style="padding-right: 80px;">
                  <el-input v-model="ruleForm2.groupName">{{ ruleForm2.groupName }}</el-input>
                </el-form-item>
                <el-form-item label="项目简介:" label-width="30%" style="padding-right: 80px">
                  <el-input type="textarea" v-model="ruleForm2.groupInfo">{{ ruleForm2.groupInfo }}</el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button style="margin-bottom:30px;background-color: #7d94c0;border-color: #7d94c0;" type="primary" @click="submitSoloForm('ruleForm')">立即创建</el-button>
                  <el-button style="" @click="resetForm('ruleForm2')">重置</el-button>
                <!--                       <el-button style="background-color: #0261a0;border-color: #0261a0;color: white" @click="dialog4 = false">确 定</el-button>-->
              </span>
            </el-dialog>
            <el-dialog title="添加单个学生" :visible.sync="dialog4" style="font-weight: bold"
                       append-to-body width="35%" class="showAll_dialog">
              <el-form label-width="80px">
                <el-form-item label="学号:" label-width="30%" style="padding-right: 80px;padding-top: 30px">
                  <el-input v-model="s4.id">{{ s4.id }}</el-input>
                </el-form-item>
                <el-form-item label="姓名:" label-width="30%" style="padding-right: 80px">
                  <el-input v-model="s4.name">{{ s4.name }}</el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button style="margin-bottom:30px;background-color: #7d94c0;border-color: #7d94c0;" type="primary" @click="submitSoloForm('ruleForm')">立即创建</el-button>
                  <el-button style="" @click="resetForm('ruleForm')">重置</el-button>
                <!--                       <el-button style="background-color: #0261a0;border-color: #0261a0;color: white" @click="dialog4 = false">确 定</el-button>-->
              </span>
            </el-dialog>
            <el-dialog title="成员列表" :visible.sync="dialogVisible1" style="font-weight: bold;"
                       append-to-body width="90%" class="showAll_dialog">

              <template>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                  <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">个人评分</el-button>
                      <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <span slot="footer" class="dialog-footer">
                <el-button style="background-color: #0261a0;border-color: #0261a0;color: white"
                           @click="dialogVisible1 = false">确 定</el-button>
              </span>
            </el-dialog>

            <el-dialog title="学生个人日志" :visible.sync="dialogVisible2" style="font-weight: bold"
                       append-to-body width="70%" class="showAll_dialog">
              <el-table
                  :data="form2"
                  :cell-style="cellStyle"
                  style="width: 100% ;color: #7d94c0">
                <el-table-column label="序号" width="90">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.$index +1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="日志时期" width="140">
                  <template slot-scope="scope">
                    <span style="">{{ scope.row.logDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="星期" width="100">
                  <template slot-scope="scope">
                    <span style="">{{ scope.row.week }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="摘要" :show-overflow-tooltip="true" width="230">
                  <template slot-scope="scope">
                    <span >{{ scope.row.abstract }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                  <template slot-scope="scope">
                    <span >{{ scope.row.static }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" :row-class-name="tableRowClassName" style="">
                  <template slot-scope="scope">
                    <el-button size="mini" style="background-color: steelblue ;color: white"
                               @click="handleEdit(scope.$index, scope.row)">查看
                    </el-button>

                  </template>
                </el-table-column>
              </el-table>

              <span slot="footer" class="dialog-footer">
                <el-button style="background-color: #0261a0;border-color: #0261a0;color: white"
                           @click="dialogVisible2 = false">确 定</el-button>
              </span>
            </el-dialog>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Group",
  data() {
    return {
      id:this.$route.query.id,
      keyword: '',
      tableData: [{
        groupName: 'javaEEH1',
        projectName:'实训项目管理系统',
        groupLeader:'余楚文',
      }, {
        groupName: 'javaEEH2',
        projectName:'电影购票系统',
        groupLeader:'蔡梓童',
      }],
      s4:{
        name:"",
        id:""
      },
      ss4:[{
        major:'软件工程'
      },
        {major: '网络空间安全'}
      ],
      ruleForm2: {
        major:'',
        groupName:'',
        groupInfo:'',
      },
      dialog1: false,
      dialog2: false,
      dialog3: false,
      dialog4: false,
      ruleForm:{},
      rules:{},
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      dialogVisible8: false,
      form1: {
        att: '20',
        ass: '40',
        class: '60',
      },
      form2: [{
        logDate: '2022-9-16',
        week:'星期一',
        abstract:'开课第一天，老师带我们了解了基本的开发环境还有发展背景，老师的幽默风格，也让我燃起了对未来项目学习的',
        static:'已编辑',
      },{
        logDate: '2022-9-17',
        week:'星期二',
        abstract:'第二天，老师带我们了解了SPRING的基本框架，然后配置完基本环境就开始运行了第一个代码hellow',
        static:'未编辑',
      }],
    }
  },
  methods: {
    search1: function () {
    },
    search2: function () {
      this.dialog2 = true ;
    },
    search3: function () {
      this.dialog3 = true ;
    },
    search4: function () {  //添加单个学生
      this.dialog4 = true;
    },
    submitSoloForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // }
      // );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cellStyle({row, column, rowIndex, columnIndex}){
      // if(row.morning !== "正常" || row.afternoon !== "正常" || row.evening !== "正常"){ //指定坐标rowIndex ：行，columnIndex ：列
      //     return 'background-color:rgb(255 248 248);' //rgb(105,0,7)
      // }
      if((row.static !== "已编辑" && columnIndex === 4)){
        return "color:#e26f6f;"
      }
      else return 'color:#7d94c0'
    },
    handleEdit1(row, column) {
      this.dialogVisible1 = true;
    },
    handleEdit2(row, column) {
      this.dialogVisible2 = true;
    },
    handleEdit3(row, column) {
      this.dialogVisible3 = true;
    },
    handleEdit4(row, column) {
      this.dialogVisible4 = true;
    },
    handleEdit5(row, column) {
      this.dialogVisible5 = true;
    },
    handleEdit6(row, column) {
      this.dialogVisible6 = true;
    },
    handleEdit7(row, column) {
      this.dialogVisible7 = true;
    },
    handleEdit8(row, column) {
      this.dialogVisible8 = true;
    },

  }
}
</script>

<style scoped>
/*表头*/
.container-fuild {

  float: left;
  /*padding-top:1.875rem;*/
  padding-right: 1.875rem;
  padding-left: 1.875rem;
  width: 93%;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #7d94c0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.page-titles .breadcrumb {
  padding: 0;
  background: transparent;
  font-size: 1.1875rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  list-style: none;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.breadcrumb li.active {
  font-weight: 600;
  font-size: 1.1875rem;
}

.breadcrumb li {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0.5rem;
  font-size: 1.1875rem;
}

/*主题部分*/
.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.card {
  width: 100%;
  margin-bottom: 1.875rem;
  background-color: #fff;
  transition: all .5s ease-in-out;
  position: relative;
  border: 0rem solid transparent;
  border-radius: 1.25rem;
  box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);
  height: calc(100% - 30px);

  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}

.card-header {
  border-color: #f5f5f5;
  position: relative;
  background: transparent;
  padding-top: 0rem;
  padding-right: 1.875rem;
  padding-bottom: 0rem;
  padding-left: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: #909399;
  text-transform: capitalize;
}

.card-body {
  padding-top: 0.125rem;
  padding-right: 1.875rem;
  padding-bottom: 2.125rem;
  padding-left: 0.850rem;
  margin-left: 20px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}


/*搜索输入框高度*/
/deep/ .el-input__inner {
  height: 31px;
}

/*设置small按钮的padding*/
.el-button--small {
  padding-left: 18px;
  padding-right: 18px;
  margin-left: 25px;
}

.el-button--mini {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 0px;
}

/*!*按钮的圆角*!*/
/*::v-deep .el-button {*/
/*  border-radius: 5px;*/
/*}*/


</style>